<!DOCTYPE HTML>
<html>
<header>

</header>
<body>
<div style="position:relative">
	<canvas id="canvas" width=288 height=288 style="background-image:url('logo.jpg')"></canvas>
	<canvas id="canvasEye" width=288 height=288 style="position:absolute;left:0px;top:0px;"></canvas>
	<script type="text/javascript">
	var bgCricle = document.getElementById('canvas');
	var ctxCricle = bgCricle.getContext('2d');
	var bgEye = document.getElementById('canvasEye');
	var ctxEye = bgEye.getContext('2d');

	ctxCricle.beginPath();
	ctxCricle.strokeStyle = '#000000';
	ctxCricle.closePath();
	ctxCricle.fill();
	ctxCricle.lineWidth = 20.0;
	
	ctxEye.fillStyle = '#000000';

	function drawArc(x,y,r,rate){
		ctxCricle.beginPath();
		ctxCricle.arc(x, y, r, 0, Math.PI * 2 * rate, false);
		ctxCricle.stroke();
	}

	function clearArc(x,y,r,rate){
		ctxCricle.beginPath();
		ctxCricle.arc(x, y, r, Math.PI * 2 * rate, 0, false);
		ctxCricle.stroke();
	}
	
	function eye(){
		ctxEye.beginPath();
		ctxEye.arc(122, 130, 8, 0, Math.PI * 2, false);
		ctxEye.arc(163, 130, 8, 0, Math.PI * 2, false);
		ctxEye.fill();
		setTimeout(function(){
			ctxEye.clearRect(0,0,r * 2,r * 2);
			setTimeout(function(){
				ctxEye.beginPath();
				ctxEye.arc(122, 130, 8, 0, Math.PI * 2, false);
				ctxEye.arc(163, 130, 8, 0, Math.PI * 2, false);
				ctxEye.fill();
				setTimeout(function(){
					ctxEye.clearRect(0,0,r * 2,r * 2);
				},600);
			},800);
		},600);
	}
	
	var r = 144;
	var rate = 0;
	var draw = true;
	function loadCanvas(){
		setInterval(function(){
			ctxCricle.clearRect(0,0,r * 2,r * 2);
			if(rate > 1){
				draw = !draw;
				rate = 0.01;
				eye();
			}
			if(draw){
				drawArc(r,r,125,rate);
			}else{
				clearArc(r,r,125,rate);
			}
			rate += 0.01;
		},50);
	}
	loadCanvas();
	</script>
</div>
</body>
</html>